import React from 'react';
import styles from './index.less';
import Top from '@/pages/index/top';
import Header from '@/pages/index/header';
import { SearchOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';

export default (props: any) => {
  return (
    <div>
      <Top openPopup={() => {
      }}/>
      <Header/>
      <div className={styles.content}>
        <nav>
          <a href="">首页</a>
          <a href=""> > </a>
          <a href="">交易订单</a>
        </nav>

        <div className={`${styles.container} clearfix`}>
          <div className={styles.left}>
            <div className={styles.navBox}>
              <div className={styles.navTitle}>订单中心</div>
              <ul>
                <li className={styles.active}>我的订单</li>
                <li>团购订单</li>
                <li>评价晒单(1)</li>
                <li>话费充值订单</li>
                <li>以旧换新订单</li>
              </ul>
            </div>
            <div className={styles.navBox}>
              <div className={styles.navTitle}>订单中心</div>
              <ul>
                <li className={styles.active}>我的订单</li>
                <li>团购订单</li>
                <li>评价晒单(1)</li>
                <li>话费充值订单</li>
                <li>以旧换新订单</li>
              </ul>
            </div>

            <div className={styles.navBox}>
              <div className={styles.navTitle}>订单中心</div>
              <ul>
                <li className={styles.active}>我的订单</li>
                <li>团购订单</li>
                <li>评价晒单(1)</li>
                <li>话费充值订单</li>
                <li>以旧换新订单</li>
              </ul>
            </div>
          </div>
          <div className={styles.right}>
            <div className={styles.title}>我的订单 <small>请谨防钓鱼链接或诈骗电话，了解更多></small></div>
            <div className={`${styles.orderStatus} clearfix`}>
              <ul>
                <li className={styles.first}><a href="" className={styles.active}>全部有效订单</a></li>
                <li><a href="">待支付</a></li>
                <li><a href="">待收货</a></li>
                <li><a href="">订单回收站</a></li>
              </ul>
              <div className={styles.search}>
                <input type="text" placeholder={`输入商品名称、商品编号、订单号`}/>
                <button><SearchOutlined/></button>
              </div>
            </div>
            <ul className={styles.orderList}>
              <li className={`clearfix`}>
                <div className={styles.status}>
                  已收货
                </div>
                <div className={`clearfix`}>
                  <div className={styles.captionInfo}>2019年09月28日 12:45<span className={styles.sep}>|</span>郭国聪<span
                    className={styles.sep}>|</span>订单号：<a
                    href="//www.mi.com/user/orderView?order_id=5190928757502540">5190928757502540</a><span
                    className={styles.sep}>|</span>在线支付（支付宝快捷支付）
                  </div>
                  <div className={styles.amount}>实付金额：<span>399.00</span>元</div>
                </div>
                <div className={styles.line}/>
                <div className={styles.detail}>
                  <img
                    src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1569238836.72564587.jpg?thumb=1&w=80&h=80"
                    alt=""/>

                  <div className={styles.name}>
                    小米真无线蓝牙耳机 Air 2 白色
                    <div>
                      399元 × 1
                    </div>
                  </div>

                  <div className={styles.operaBtn}>
                    <button>订单详情</button>
                    <button className={styles.active}>评价晒单</button>
                    <button>申请售后</button>
                  </div>
                </div>
              </li>


              <li className={`clearfix`}>
                <div className={styles.status}>
                  已收货
                </div>
                <div className={`clearfix`}>
                  <div className={styles.captionInfo}>2019年09月28日 12:45<span className={styles.sep}>|</span>郭国聪<span
                    className={styles.sep}>|</span>订单号：<a
                    href="//www.mi.com/user/orderView?order_id=5190928757502540">5190928757502540</a><span
                    className={styles.sep}>|</span>在线支付（支付宝快捷支付）
                  </div>
                  <div className={styles.amount}>实付金额：<span>399.00</span>元</div>
                </div>
                <div className={styles.line}/>
                <div className={styles.detail}>
                  <img
                    src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1569238836.72564587.jpg?thumb=1&w=80&h=80"
                    alt=""/>

                  <div className={styles.name}>
                    小米真无线蓝牙耳机 Air 2 白色
                    <div>
                      399元 × 1
                    </div>
                  </div>

                  <div className={styles.operaBtn}>
                    <button>订单详情</button>
                    <button className={styles.active}>评价晒单</button>
                    <button>申请售后</button>
                  </div>
                </div>
              </li>


              <li className={`clearfix`}>
                <div className={styles.status}>
                  已收货
                </div>
                <div className={`clearfix`}>
                  <div className={styles.captionInfo}>2019年09月28日 12:45<span className={styles.sep}>|</span>郭国聪<span
                    className={styles.sep}>|</span>订单号：<a
                    href="//www.mi.com/user/orderView?order_id=5190928757502540">5190928757502540</a><span
                    className={styles.sep}>|</span>在线支付（支付宝快捷支付）
                  </div>
                  <div className={styles.amount}>实付金额：<span>399.00</span>元</div>
                </div>
                <div className={styles.line}/>
                <div className={styles.detail}>
                  <img
                    src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1569238836.72564587.jpg?thumb=1&w=80&h=80"
                    alt=""/>

                  <div className={styles.name}>
                    小米真无线蓝牙耳机 Air 2 白色
                    <div>
                      399元 × 1
                    </div>
                  </div>

                  <div className={styles.operaBtn}>
                    <button>订单详情</button>
                    <button className={styles.active}>评价晒单</button>
                    <button>申请售后</button>
                  </div>
                </div>
              </li>
            </ul>
            <div className={styles.pagination}>
              <LeftOutlined style={{marginRight:"20px",fontSize:"20px",lineHeight:"32px",height:"32px"}}/>
              <a href=""  className={styles.pageNo}>1</a>
              <RightOutlined style={{marginLeft:"20px",fontSize:"20px",lineHeight:"32px",height:"32px"}}/>
            </div>
          </div>
        </div>

        <div className={styles.footer}>

        </div>
        <div className={styles.bottom}>

        </div>
      </div>
      {/*layout*/}
      {/*{props.children}*/}
    </div>
  );
}
